<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../javascript/lib/jquery.js"></script>
</head>
<body>
<script>

    //默认值
    (function(){

        //let [a, b, c] = [1, 2, 3];
        //console.log(a)

        //赋值可以为默认值
        //let [y=456] = [];
        //console.log(y)


        //let [x, y = 'b'] = ['a']; // x='a', y='b'
        //console.log(x)
        //let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'


        //ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。
        //let [x = 1] = [undefined];
        //console.log(x)  //1

        //let [x = 1] = [null];
        //console.log(x) //null

        //默认值可以引用解构赋值的其他变量，但该变量必须已经声明。
        //let [x = 11, y = x] = []; // x=11; y=11
        //console.log(x,y)
        //let [x = y, y = 1] = [];     // ReferenceError

    });

    //对象的结构赋值
    (function(){

        //let { foo, bar } = { foo: "aaa", bar: "bbb" };
        //console.log(foo)
        //而对象的属性没有次序，变量必须与属性同名，才能取到正确的值
        //这实际上说明，对象的解构赋值是下面形式的简写
        //let { foo,bar} = { foo: "aaa", bar: "bbb" };
        //let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
        //console.log(foo)

        //嵌套赋值
        let obj = {
            p: [
                'Hello',
                { y: 'World'}
            ]
        };

        //let { p: [x,{ y }] } = obj;
        //console.log(y)

        //例子1
        //let obj1 = {};
        //let arr1 = [];
        //({ foo: obj1.prop, bar: arr1[0] } = { foo: 123, bar: true });
        //obj1 // {prop:123}
        //arr1 // [true]

        //如果解构失败，变量的值等于undefined。
        //let {foo} = {bar: 'baz'};
        //foo // undefined

        //如果要将一个已经声明的变量用于解构赋值，必须非常小心
        //let x;
        //{x} = {x: 1}; //错误的写法
        //({x} = {x: 1});
        //console.log(x)

        //对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量
        //let { log, sin, cos } = Math;
    });


    //函数参解构赋值************************************
    (function(){
        //[[1, 2], [3, 4]].map(([a, b]) => a + b);
        //[ 3, 7 ]
        function move({x = 0, y = 0} = {}) {
            return [x, y];
        }
        console.log(move({x: 3, y: 8}));
    });

    //用途********************************************
    (function(){

        //返回多个值-----------------------
        function example() {
            return [1, 2, 3];
        }
        //let [a, b, c] = example();

        // 返回一个对象
        function example() {
            return {
                foo: 1,
                bar: 2
            };
        }
        //let { foo, bar } = example();

        //参数对应-------------------------

        //function f([x, y, z]) { }
        //f([1, 2, 3]);

        //function f({x, y, z}) {console.log(x)}
        //f({z: 3, y: 2, x: 1});

        //提取json----------------------------
        let jsonData = {
            id: 42,
            status: "OK",
            data: [867, 5309]
        };

        let { id, status, data: arr } = jsonData;
        console.log(id, status, arr);

        //遍历Map解构--------------------------
        var map = new Map();
        map.set('first', 'hello');
        map.set('second', 'world');

        for (let [key, value] of map) {
            console.log(key + " is " + value);
        }
        // first is hello
        // second is world


    })


</script>
</body>
</html>






















